<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view class="wrap" v-else>
		<view class="activityBox">
			<view class="actInfo actBGBox">
				<view class="actIContent">
					<view class="aicImg">
						<image class="logoimg" :src="imageList[0]" mode="aspectFill"></image>
					</view>
					<view class="aicCenter">
						<view class="aicTitle">{{ $util.entitiesToUtf16(ballInfo.Title) }}</view>
						<view class="aicText">
							<view class="hiddenText">{{ `时间：${getTime2(ballInfo.ServerDate)}
								${getWeek(ballInfo.ServerDate)}${ballInfo.ServerTime}` }}</view>
							<view class="hiddenText">{{ '地址：' + ballInfo.Place }}</view>
						</view>
					</view>
				</view>
				<view class="actIPiceBox">
					<view class="aipTitle">总价：</view>
					<view class="aipNum">{{ ballInfo.RegisterFee == 0 ? ('免费') : ('￥' + ballInfo.RegisterFee) }}</view>
				</view>
				<view class="actIPiceBox">
					<view class="aipTitle">付款方式：</view>
					<view class="aipNum">{{ ballInfo.PayType}}</view>
				</view>
			</view>
			<view class="knowBox actBGBox">
				<view class="kbTop">
					<view class="kbImg">
						<image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722929251734800.png"
							mode="widthFix" />
					</view>
					<view class="kbTitle">报名须知</view>
				</view>
				<view class="kbCenterBox">
					<view class="kbText">1、现场请向活动举办方出示二维码，验票入场；</view>
					<view class="kbText">2、参加活动注意事项<text @click.stop="openPopupTip">报名须知></text></view>
				</view>
			</view>
			<view class="knowBox actBGBox">
				<view class="kbTop">
					<view class="kbImg">
						<image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722930468995144.png"
							mode="widthFix" />
					</view>
					<view class="kbTitle">免责声明</view>
				</view>
				<view class="kbCenterBox">
					<view class="kbText">{{ knowMsg2.Content }}</view>
				</view>
			</view>


			<!-- 以前展示方式暂时性注释，看未来需求删除 star -->
			<!-- <view class="Remarksbox">
				<view class="remtext">报名备注(选填)</view>
				<view class=" group_textarea">
					<textarea style="width: 100%;height: 70%; font-weight: 400;" :value="Remark"
						placeholder="请简要填写报名备注，提高发布者联系你的概率" placeholder-class="remtitle" maxlength="200"
						@input="inputrem" />
					<view class="count">{{ Remark.length }} / {{ maxCount }}</view>
				</view>
			</view>
			<view class="bg">
				<view class="group">
					<view class="lab">{{ ballInfo.AppointmentType == '一起挥' ? '标题' : ballInfo.AppointmentType ==
						'找私教' ? '私教标题' : '教学标题' }}</view>
					<view class="inp_box"><input :value="$util.entitiesToUtf16(ballInfo.Title)" disabled type="text" />
					</view>
				</view>
				<view class="group"
					v-if="ballInfo.AppointmentType == '一起挥' && ballInfo.ServerDate && ballInfo.ServerTime">
					<view class="lab">{{ ballInfo.AppointmentType == '一起挥' ? '时间' : ballInfo.AppointmentType ==
						'找私教' ? '私教时间' : '教学时间' }}</view>
					<view class="inp_box"><input :value="formtStartBall() || ''" type="text" disabled /></view>
				</view>
				<view v-if="ballInfo.AppointmentType == '一起挥'" class="group">
					<view class="lab">是否免费</view>
					<view class="inp_box"><input :value="ballInfo.FeeRule" disabled type="text" /></view>
				</view>
			</view> -->
			<!-- 以前展示方式暂时性注释，看未来需求删除 end -->
		</view>
		<!-- 以前展示方式暂时性注释，看未来需求删除 star -->
		<!-- <view class="Placebox" @click="openMap">
			<view class="left">
				<view class="title">{{ ballInfo.Place }}</view>
				<view class="dis">{{ ballInfo.Distance ? ballInfo.Distance + 'km' : '' }}</view>
			</view>
			<image class="mapimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715242703464436.png"
				mode="widthFix"></image>
		</view> -->
		<!-- 以前展示方式暂时性注释，看未来需求删除 end -->
		<view class="join_btn flx flx_align_center flx_justify_center">
			<view class="confirm" @click="sub">确认报名</view>
		</view>
		<uni-popup ref="popupTip" type="bottom">
			<view class="tip wap">
				<view class="tit f1 fwb">
					报名须知
				</view>
				<view class="txt">
					<view class="mt20">
						<text class="f3 c2">{{ knowMsg1.Content }}</text>
					</view>
				</view>
				<view class="btn mt20 mb30" @click="closePopupTip">关闭</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			Remark: '',
			ball_ID: 0,
			ballInfo: {},
			isRead: true,
			longitude: '',
			latitude: '',
			BarTitle: '',
			Title: '',
			isShow: false,
			maxCount: 200,
			Note: '',
			sum: 0,
			imageList: [],
			knowMsg1: '',//报名须知
			knowMsg2: '',//免责声明
			load: false,
		};
	},
	computed: {

	},
	async onLoad(e) {

		this.ball_ID = e.id;
		await this.getKnowMsg()
		await this.$api.post('/Common/Add_ViewPath', {
			Path: 'ball_join_confirm',
			Platform: uni.getStorageSync('platform')
		});


		let loc = await this.getLocationSysc();

		this.longitude = loc.longitude;
		this.latitude = loc.latitude;
		this.getDetail()

	},
	async onShow() {

	},
	methods: {
		// 报名须知以及
		async getKnowMsg() {
			let that = this
			let res = await this.$api.post("Content/GetContent", {
				ID: 4,
			});
			if (res.code == 0) {
				that.knowMsg1 = res.data
			}
			let res2 = await this.$api.post("Content/GetContent", {
				ID: 3,
			});
			if (res2.code == 0) {
				that.knowMsg2 = res2.data
			}
		},
		getTime2(l) {
			let d = new Date(l);
			let timestamp = d.getTime();
			return this.$u.date(timestamp, 'mm-dd');
		},
		async getserve() {
			let title;
			if (this.ballInfo.AppointmentType == '一起挥') {
				title = '一起挥报名'
			} else if (this.ballInfo.AppointmentType == '找私教') {
				title = '找私教报名'
			} else {
				title = '招学员报名'
			}
			let res = await this.$api.post("Common/GetServerPrice", {
				Item: title,
			});
			if (res.code == 0) {
				this.sum = res.data.Score
			}
		},
		async getDetail() {
			let res = await this.$api.post('Appointment/Detail', {
				ID: this.ball_ID,
				User_Lng: this.longitude,
				User_Lat: this.latitude
			});
			if (res.code == 0) {
				this.ballInfo = res.data;
				this.BarTitle = res.data.AppointmentType + '报名'
				this.Title = '活动报名'
				this.imageList = res.data.Images.split(',')
				uni.setNavigationBarTitle({
					title: this.Title,
					success: function () {
					},
					fail: function (err) {
					}
				});
				this.Note = this.repdis(res.data.Remark)
				this.getserve()
				this.load = true
			}
		},
		//过滤标签
		repdis(msg) {
			var msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
			msg = msg.replace(/[|]*\n/, ''); //去除行尾空格
			msg = msg.replace(/&npsp;/gi, ''); //去掉npsp
			return msg;
		},
		maskPhoneNumber(phoneNumber) {
			return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '****');
		},

		maskWeChatId(wechatId) {
			// 示例中简单处理，假设微信号由字母数字组成，这里仅作为示例，实际情况可能更复杂
			return wechatId.replace(/(\w{2})\w+(\w{2})/, '****');
		},

		processText(text) {
			// 手机号码正则，匹配中国大陆手机号格式
			const phoneRegex = /\b1[3-9]\d{9}\b/g;
			// 微信号正则，简单示例，实际可能需要更复杂的匹配规则
			const wechatRegex = /\b[\w]{5,}\b/g;

			// 替换手机号
			text = text.replace(phoneRegex, match => this.maskPhoneNumber(match));
			// 替换微信号
			text = text.replace(wechatRegex, match => this.maskWeChatId(match));

			return text;
		},
		openPopupTip() {
			this.$refs.popupTip.open();
		},
		closePopupTip() {
			this.$refs.popupTip.close();
		},
		inputrem(e) {
			const { value, cursor } = e.detail
			let str = this.$util.entitiesToUtf16(value)
			str = this.processText(str)
			if (str.length > 200) {
				this.Remark = str.slice(0, 200)
			} else {
				this.Remark = str
			}
			console.log(this.Remark);
			// this.reqData.Remark
		},
		openMap(item) {
			uni.openLocation({
				latitude: this.ballInfo.Latitude,
				longitude: this.ballInfo.Longitude,
				success: function () {
					console.log('success');
				}
			});
		},
		// 获取定位
		async getLocationSysc() {
			let _this = this;
			return new Promise((resolve, reject) => {
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						resolve(res)
					},
					fail: function (err) {
						const defaultLocation = {
							latitude: 0,
							longitude: 0
						};
						resolve(defaultLocation);
					}
				});
			})

		},
		openMsg() {
			// #ifdef MP-WEIXIN
			return new Promise((r, j) => {
				wx.requestSubscribeMessage({
					tmplIds: [
						'DPIDpGWLUduOH8cvHUYVnpSdt2zuZXghR-so3Sa4lcA',
						'notKn8gsESYpHrQzjncHjGjvDHqG_6FmZAMEH_wCpTg'
					],
					success(res) {
						r(res);
					},
					fail(err) {
						j(res);
					}
				});
			});
			// #endif
			// #ifdef APP
			return true
			// #endif
		},
		setinstruc() {
			this.isShow = true
		},
		setRead() {
			this.isRead = !this.isRead;
		},
		setGoTime(e) {
			this.goTime.value = e.value[0];
			this.goTime.show = false;
		},
		getTime2(l) {
			let d = new Date(l);
			let timestamp = d.getTime();
			return this.$u.date(timestamp, 'mm-dd');
		},
		getWeek(l) {
			let d = new Date(l);
			let week = d.getDay();
			let weelStr =
				week == 0 ?
					'星期天' :
					week == 1 ?
						'星期一' :
						week == 2 ?
							'星期二' :
							week == 3 ?
								'星期三' :
								week == 4 ?
									'星期四' :
									week == 5 ?
										'星期五' :
										'星期六';
			return weelStr;
		},
		formtStartBall() {
			if (this.ballInfo.ServerDate && this.ballInfo.ServerTime) {
				return `${this.getTime2(this.ballInfo.ServerDate)} ${this.getWeek(
					this.ballInfo.ServerDate
				)} ${this.ballInfo.ServerTime}`;
			} else {
				return ''
			}

		},
		async sub() {

			// await this.openMsg();

			if (!this.isRead) {
				this.$pv.msg('请先阅读并同意《报名须知》');
				return;
			}

			const user = uni.getStorageSync('user')


			if (this.ballInfo.UserID == user.UserID) {
				this.$pv.msg('不能报名自己创建的组局')
				return
			}

			this.$pv.load();
			let remark = this.$util.utf16ToEntities(this.Remark).slice(0, 201)
			// this.getserve()
			let _this = this
			this.$pv.closeLoad()
			if (_this.ballInfo.IsPayRegisterFee == 1) {
				if(_this.ballInfo.PayType=='线上付款'){
					let res1 = await _this.$api.post('Appointment/Sign', {
						AppointmentID: _this.ballInfo.ID,
						Remark: remark,
						PeopleNum: _this.ballInfo.PeopleNum
					});
					if (res1.code == 0) {
						let pres = await _this.$api.post('Payment/PayV2', {
							total_fee: res1.data.Pay_Total,
							EventType: res1.data.EventType,
							EventID: res1.data.EventID,
							body: res1.data.Pay_Body,
							SourcePage: 'ball_join_confirm',
							// #ifdef MP-WEIXIN
							PayChannel: 'weixin',
							// #endif
							// #ifdef APP
							PayChannel: 'app'
							// #endif
						});
					
						if (pres.data == 0) {
							//已余额支付成功
							this.$pv.msg('报名成功');
							return;
						}
					
						let payObj = JSON.parse(pres.data);
						console.log(payObj);
						// let _this = this;
						uni.requestPayment({
							provider: 'wxpay',
							// #ifdef APP
							orderInfo: payObj,
							// #endif
							// #ifdef MP-WEIXIN
							timeStamp: payObj.timeStamp,
							nonceStr: payObj.nonceStr,
							package: payObj.package,
							signType: payObj.signType,
							paySign: payObj.paySign,
							// #endif
							success: async function (res) {
								_this.$pv.msg('报名成功');
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/ball/ball_join_success?id=' + _this.ball_ID + '&teamID=' + _this.ballInfo.TeamID
									});
								}, 800);
					
					
							},
							fail: async function (err) {
								let del = await _this.$api.post('Appointment/DeleteSign', {
									ID: res1.data.EventID,
								});
								_this.$pv.msg('您已取消支付');
							}
						});
						// _this.$pv.msg('报名成功');
					
					} else {
						_this.$pv.msg(res1.message || '报名失败');
					}
				}
				else{
					//柜台结算，不需要支付
					let res1 = await _this.$api.post('Appointment/Sign', {
						AppointmentID: _this.ballInfo.ID,
						Remark: remark,
						PeopleNum: _this.ballInfo.PeopleNum
					});
					if (res1.code == 0) {
						
						uni.showModal({
						  title: "温馨提示",
						  content: "您已成功报名,需在活动当天现场支付本次活动费用",				
						  cancelText: "我知道了",
						  success: function (res) {
						    if (res.confirm) {
						      url: '/pages/ball/ball_join_success?id=' + _this.ball_ID + '&teamID=' + _this.ballInfo.TeamID
						    } else if (res.cancel) {
						      
						    }
						  },
						});
					
					} else {
						_this.$pv.msg(res1.message || '报名失败');
					}
				}
				

			} else {
				let res1 = await _this.$api.post('Appointment/Sign', {
					AppointmentID: _this.ballInfo.ID,
					Remark: remark,
					PeopleNum: _this.ballInfo.PeopleNum
				});
				if (res1.code == 0) {
					_this.$pv.msg('报名成功');
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/ball/ball_join_success?id=' + _this.ball_ID + '&teamID=' + _this.ballInfo.TeamID
						});
					}, 800);

				} else {
					_this.$pv.msg(res1.message || '报名失败');
				}
			}




		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}


view {
	box-sizing: border-box;
}

.activityBox {
	width: 100%;
	padding: 24rpx 32rpx;

	.actBGBox {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
	}

	.actInfo {
		width: 100%;

		.actIContent {
			width: 100%;
			display: flex;

			.aicImg {
				width: 164rpx;
				height: 216rpx;
				border-radius: 8rpx;
				overflow: hidden;

				.logoimg {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.aicCenter {
				width: calc(100% - 164rpx);
				padding-left: 32rpx;
				height: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.aicTitle {
					width: 100%;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.aicText {
					width: 100%;

					>view {
						margin-top: 4rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}

				}
			}
		}

		.actIPiceBox {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			margin-top: 32rpx;

			.aipTitle {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.aipNum {
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}
		}
	}

	.knowBox {
		width: 100%;

		.kbTop {
			width: 100%;
			display: flex;
			align-items: center;

			.kbImg {
				width: 40rpx;
				height: 40rpx;

				>image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.kbTitle {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-left: 8rpx;
			}
		}

		.kbCenterBox {
			width: 100%;
			margin-top: 24rpx;

			.kbText {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				margin-top: 16rpx;
				line-height: 1.6;
				white-space: pre-wrap;

				>text {
					font-weight: 500;
					font-size: 24rpx;
					color: #706EEE;
				}
			}
		}
	}
}

.shadowbox {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 0;
	left: 0;

	.contentbox {
		width: 80%;
		height: 500rpx;
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
}

.Placebox {
	width: 100%;
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	margin-top: 16rpx;

	.left {
		margin-left: 32rpx;
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: space-between;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
		}

		.dis {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			margin-right: 24rpx;
		}
	}

	.mapimg {
		width: 56rpx;
		height: 56rpx;
		margin-right: 32rpx;
	}
}

.Remarksbox {
	width: 100%;
	height: 320rpx;
	background-color: #fff;
	margin-top: 16rpx;
	overflow: hidden;

	.remtext {
		color: #333333;
		font-size: 32rpx;
		margin: 32rpx 0 20rpx 32rpx;

	}

	.group_textarea {
		height: 212rpx;
		margin-top: 30rpx;
		margin-left: 32rpx;
		// background-color: #fff;
		// padding-left: 32rpx;
		// text-indent: 2em;
		box-sizing: border-box;
		position: relative;

		.remtitle {
			font-size: 28rpx !important;
			color: #C2C2C2 !important;
			font-weight: 500 !important;
		}

		.count {
			position: absolute;
			bottom: 20rpx;
			right: 33rpx;
			font-size: 28rpx;
			color: #C2C2C2;
		}

		/deep/ .u-textarea {
			background: none !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
			border-bottom: none !important;
			padding: 0 !important;
			height: 100% !important;
			text-indent: 2em;
		}

		/deep/ .u-textarea__count {
			background: none !important;
			color: #0d0d0d !important;
		}

		/deep/ .u-textarea__field {
			color: #0d0d0d !important;
			font-size: 28rpx !important;
			height: 100% !important;
		}
	}

	.u-textarea {
		width: 686rpx;
		height: 180rpx;
		margin-left: 32rpx;
		background-color: #F8F8F8 !important;
		box-sizing: border-box;
	}

	.input-placeholder {
		font-size: 28rpx;
		color: #999999;
		font-weight: 500;
	}
}

.wrap {
	position: relative;
	padding-bottom: 180rpx;

	.join_btn {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		flex-wrap: wrap;
		background: #ffffff;
		padding-bottom: 66rpx;

		.confirm {
			width: 92%;
			margin-bottom: 8rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 110rpx;
			background: #706EEE;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
			letter-spacing: 3px;
		}

		>.btn {
			width: 92%;
			margin-bottom: 8rpx;
		}
	}
}

// .title {
// 	padding: 20rpx 0 10rpx;
// 	margin-left: 30rpx;
// 	font-size: 44rpx;
// 	line-height: 60rpx;
// }

.bg {
	margin-top: 20rpx;
	// background: #202020;
	border-radius: 16rpx;
	background-color: #fff;
}

.group {
	display: flex;
	align-items: center;
	height: 100rpx;
	border-bottom: 1px solid #e4e4e4;
	margin-left: 30rpx;
	margin-right: 30rpx;

	&:last-child {
		border-bottom: none;
	}

	.lab {
		padding-right: 10rpx;
		color: #999999;
		font-size: 32rpx;
	}

	.goTime {
		color: white;
	}

	.inp_box {
		flex: 1;

		input {
			font-size: 32rpx;
			color: #333333;
			width: 100%;
			text-align: right;
		}
	}

	.icon_box {
		height: 40rpx;
		width: 40rpx;
		line-height: 40rpx;
	}
}

.mt30 {
	margin-top: 30rpx;
}

.tip {
	padding-bottom: 20rpx;
	background: #fff;
	border-radius: 10rpx 10rpx 0 0;

	.tit {
		line-height: 90rpx;
		text-align: center;
		color: #333;
	}

	.txt {
		padding-bottom: 40rpx;

		.c2 {
			color: #666;
			white-space: pre-wrap;
		}
	}

	.mb30 {
		margin-bottom: 30rpx;
	}
}
</style>